<!--  frame 优惠卷兑换 -->
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8" />
  <meta name="divport" content="width=device-width,initial-scale=1,user-scalable=no" />
  <meta name="format-detection" content="telephone=no,email=no,date=no,address=no" />
	<title>优惠卷兑换</title>
	<link rel="stylesheet" href="../plugin/hhframe/hhframe.min.css" />
	<link rel="stylesheet" href="../style/index.css"/>

	<style>

	body {
	  /*background-color:#F8F8F8;*/
	}

.card {
    margin: .20rem;
    position: relative;
    /* border: 1rem solid #eee; */
    background: #fff;
    border-radius: .10rem;
}

.bt {
    width: 1.50rem;
    height: .50rem;
    background: #ff502d;
    border-radius: .32rem;
    color: #FEFEFE;
}

.coupon-time {
    height: .80rem;
    padding: 0 .30rem;
    position: relative;
}

.lading{
	display: flex;
	justify-content: center;
	align-content: center;
	font-size: .30rem;
	color: #aaa;
	margin-bottom: .50rem;

}
.flex-between {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}
.flex {
  display: flex;
  align-items: center;
}

	</style>
</head>
<body>
	<div class="content app" v-cloak>
		<!-- 领取优惠券 -->
		<div>
		    <div class="card " style="padding: .20rem;" v-for="(item,index) in card" :key="index">
		        <div class="flex-between">
		            <div style="width: 70%;">
		                <div class="flex"  style="color: #FF502D;">
		                    <div  style="position: relative;margin-top: .20rem;font-size:.24rem;">￥</div>
		                    <div  style="font-size:.6rem;">{{item.used_amount}}</div>
		                    <div  style="position: relative;margin-top: .20rem;font-size:.28rem;padding-left: .20rem;">满{{item.with_amount}}使用</div>
		                </div>
		                <div  style="color:#444;font-size:.3rem;font-weight:700; margin-left: .20rrem;">{{item.title}}</div>
		                <div style="font-size:.22rem;color:#999;margin-top: .20rem;">{{item.valid_start_time}}-{{item.valid_end_time}}</div>
		            </div>
		            <div style="border-left: 1px solid #eee;padding:.20rem 0;padding-left: .40rem;">
		                <div class="flex-center" style="color: #FFB800;font-size:.28rem;">{{item.integral}}分</div>
		                <div class="bt flex-center" style="font-size:.28rem;margin-top: .10rem;" @click="getReceiveCoupon(item.id,item.integral)" >立即兑换</div>
		            </div>
		        </div>
		    </div>

		    <!-- <div class="mrp-t-40 flex-center" wx:if="{{card.length<=0}}">
		            <no-data data="{{noData}}"></no-data>
		    </div> -->
			<div class="lading">
					  <div  v-if="lading == 1">上拉加载</div>
					  <div  v-if="lading == 2">正在加载...</div>
					  <div  v-if="lading == 3">没有更多数据了</div>
			</div>
		</div>

	</div>
</body>
<script src="../plugin/jquery.js"></script>
<script src="../plugin/vue.all.js"></script>
<script src="../plugin/hhframe/hhframe.min.js"></script>
<script src="../plugin/public.js"></script>
<script type="text/javascript" src="../script/api.js"></script>
<script type="text/javascript">
window.addEventListener("apiready",function(){
	index()
});

function index()
{
	var vm = new Vue({
		el: ".app",
		data: {
			 type: 1, // 0 我的优惠券、1 领取优惠券
	     shop: 1,
	     card: [],
	     hongBaoData: [],
		   page:1,
		 	 size:20,
		 	 lading:1
		},
		mounted: function(){
				this.getData()
				this.setCustomRefreshHeaderInfo()// 下拉刷新
				this.vmaddEventListener()//上拉加载
		},
		methods: {
			// 下拉刷新
			setCustomRefreshHeaderInfo: function(){
				api.setCustomRefreshHeaderInfo({
							bgColor: '#eee',
							tips: {
									pull: '下拉刷新',
									threshold: '松开立即刷新',
									load: '正在刷新'
							}
					}, function() {
							vm.getData() //获取数据
							// setTimeout(function() {
							//     api.refreshHeaderLoadDone()//关闭下拉刷新状态
							// }, 1000)
					});
			},
			// 上拉加载
			vmaddEventListener: function () {
				api.addEventListener({
						name: 'scrolltobottom',
						extra: {
								threshold: 0 //设置距离底部多少距离时触发，默认值为0，数字类型
						}
				}, function(ret, err) {
					vm.getDatapush()//获取数据  上拉加载
				});
			},
			//获取数据
			getData: function (loader){
				this.lading = 2
	      this.page = 1
				let param = {
					page: this.page,
					size: this.size,
				}
				AjaxSafe({
			   		url:"/xapp/user/couponList",
			    	data:param,
			    	loader:loader,
					success: function(res) {
					  	vm.card = res.list
							if(res.list.length == vm.size){
						      vm.lading = 1
						  }else{
						  		vm.lading = 3
						  }
							api.refreshHeaderLoadDone()//关闭下拉刷新状态
					},
					failed: function(err){
						 api.refreshHeaderLoadDone()//关闭下拉刷新状态
							alert("网络故障！");
					}
				});
			},
			//获取数据  分页
			getDatapush: function (loader){
				if(this.lading != 1) return
				this.lading = 2
				++this.page
				let param = {
					page: this.page,
					size: this.size,
				}
				AjaxSafe({
						url:"/xapp/user/couponList",
						data:param,
						loader:loader,
					success: function(res) {
							vm.card.push(...res.list)
							if(res.list.length == vm.size){
									vm.lading = 1
							}else{
									vm.lading = 3
							}
					},
					failed: function(err){
							alert("网络故障！");
					}
				});
			},
			//兑换优惠券
		  getReceiveCoupon: function(id,number) {
				hhPanel.confirm({
				    title: "提示",
				    content: "确认消耗"+ number +"积分兑换该卷吗？",
				    btns: ["取消","确定"]

				},function(){
					let param = {
							coupon_id: id,
					}
					AjaxSafe({
							url:"/xapp/user/receiveCoupon",
							data:param,
							loader:true,
						success: function(res) {
									api.toast({
										msg: res.msg,
										duration: 2000,
										location: 'middle'
									});
						},
						failed: function(err){
								alert("网络故障！");
						}
					});
				});

		  },




		},

	});
}

</script>
</html>
